<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="${ctxPath!}/static/wap/css/amazeui.min.css">
<link rel="stylesheet" href="${ctxPath!}/static/wap/css/wap.css?2">
<title>首页</title>
</head>
<body>
	<div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
		<a href="#top" title=""> <img class="am-gotop-icon-custom"
			src="${ctxPath!}/static/wap/img/goTop.png" />
		</a>
	</div>

	<div class="pet_mian" id="top">
		<div data-am-widget="slider" class="am-slider am-slider-a1"
			data-am-slider='{"directionNav":false}'>
			<ul class="am-slides">
				<li><img src="${ctxPath!}/static/wap/img/fl01.png">
					<div class="pet_slider_font">
						<span class="pet_slider_emoji"> (╭￣3￣)╭♡ </span> <span>“大白”有望成为现实：充气机器人研究取得进展</span>
					</div>
					<div class="pet_slider_shadow"></div></li>
				<li><img src="${ctxPath!}/static/wap/img/fl02.png">
					<div class="pet_slider_font">
						<span class="pet_slider_emoji"> []~(￣▽￣)~* </span> <span>已然魔性的雪橇犬哈士奇
							—《雪地狂奔》</span>
					</div>
					<div class="pet_slider_shadow"></div></li>
				<li><img src="${ctxPath!}/static/wap/img/fl03.png">
					<div class="pet_slider_font">
						<span class="pet_slider_emoji"> (｡・`ω´･) </span> <span>《星际争霸2:虚空之遗》国服过审!</span>
					</div>
					<div class="pet_slider_shadow"></div></li>
			</ul>
		</div>


		<div class="pet_circle_nav">
			<ul class="pet_circle_nav_list">
				@var cateList=auth.getCateGory("houseNav"); 
							@for(nav in cateList!){
					<li><a  class="iconfont pet_nav_zhangzhishi " href="${ctxPath!}/wap/cms/cateArticle/${nav.id}">
							&#xe607;</a><span>${nav.name!}</span></li> 
							@}
				
				<li><a href="javascript:;" class="iconfont pet_nav_gengduo ">&#xe600;</a><span>更多</span></li>
			</ul>
			<div class="pet_more_list">
				<div class="pet_more_list_block">
					<div class="iconfont pet_more_close">×</div>
					<div class="pet_more_list_block">
						<div class="pet_more_list_block_name">
							<div class="pet_more_list_block_name_title">阅读 Read</div>
								@for(nav in cateList!){
								<a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/cateArticle/${nav.id}"> <i
									class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
									<div class="pet_more_list_block_line_font">${nav.name!}</div></a>
								@}
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="pet_content_main">
			<div data-am-widget="list_news"
				class="am-list-news am-list-news-default">
				<div class="am-list-news-bd">
					<ul class="am-list">
						<!--缩略图在标题右边-->
							@for(article in articleList.list){
							
							 <li class="am-g am-list-item-desced pet_list_one_block">
						              <div class="pet_list_one_info">
						            <div class="pet_list_one_info_l">
						                <div class="pet_list_one_info_ico"><img src="${imgServer!}/${article.image}" alt=""></div>
						                <div class="pet_list_one_info_name">zscat</div>
						            </div>
						            <div class="pet_list_one_info_r">
						                <div class="pet_list_tag pet_list_tag_stj"><a href="${ctxPath!}/wap/cms/cateArticle/${article.categoryId}" class="">${article.categoryname!}</a></div>
						            </div>
						        </div>
						        <div class=" am-list-main">
						            <h3 class="am-list-item-hd pet_list_one_bt"><a href="${ctxPath!}/wap/cms/readerDetail/${article.id!}" class="">${article.title!}</a></h3>
						  <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3
						  am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list" >
						      @var imgList1=strutil.stringToList(article.moreimage,2);
								@for(article2 in imgList1!){
									<li>
						        <div class="am-gallery-item">
						            <a href="${ctxPath!}/wap/cms/readerDetail/${article.id!}" class="">
						              <img src="${article2}"  alt="${article2}"/>
						            </a>
						        </div>
						      </li>
								 @}
						      
						  </ul>
						            <div class="am-list-item-text pet_list_two_text">${strutil.subStringLen(article.description!'',30)}</div>
						        </div>
						      </li>
						      
							@}
						
						
						
						
						
						
					</ul>
				</div>

			</div>

		</div>
		<div class="pet_article_dowload pet_dowload_more_top_off">
			<div class="pet_article_dowload_title">关于Amaze UI</div>
			<div class="pet_article_dowload_content pet_dowload_more_top_bg">
				<div class="pet_article_dowload_triangle pet_dowload_more_top_san"></div>
				<div class="pet_article_dowload_ico">
					<img src="${ctxPath!}/static/wap/img/footdon.png" alt="">
				</div>
				<div class="pet_article_dowload_content_font">Amaze UI
					以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。</div>
				<div class="pet_article_dowload_all">
					<a href="###" class="pet_article_dowload_Az am-icon-apple"> App
						store</a> <a href="###" class="pet_article_dowload_Pg am-icon-android">
						Android</a>
				</div>
			</div>
			<div class="pet_article_footer_info">Copyright(c)2015 Amaze UI
				All Rights Reserved</div>
		</div>
	</div>

	<script src="${ctxPath!}/static/wap/js/jquery.min.js"></script>
	<script src="${ctxPath!}/static/wap/js/amazeui.min.js"></script>
	<script>
$(function(){

    // 动态计算新闻列表文字样式
    auto_resize();
    $(window).resize(function() {
        auto_resize();
    });
    $('.am-list-thumb img').load(function(){
        auto_resize();
    });

    $('.am-list > li:last-child').css('border','none');
    function auto_resize(){
        $('.pet_list_one_nr').height($('.pet_list_one_img').height());

    }
        $('.pet_nav_gengduo').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
       });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
});

</script>
</body>
</html>